<template>
  <div class="preview-image">
    <el-dialog title="" :visible.sync="editConfig.visible" :width="dialogWidth" :before-close="handleClose">
      <div class="content" style="position: relative;">
        <div class="header-box">
          <div class="label-box" v-if="!editConfig.isLookImg">
            <div class="common-title" >
              {{ editConfig.title }}
            </div>
          </div>
          <div class="close-box">
            <el-image :src="closeUrl" class="img-right" @click.native="handleClose"></el-image>
          </div>
        </div>
        <div class="info_wrap">
          <div class="member-info">
            <img src="@/assets/images/comparisonManage/user.png" alt="">
            <span>张曾飞</span>
            <span>男</span>
            <span>意图:</span>
          </div>
          <div class="search_info">
            <p>
              <span>停留时长:</span>
              <el-input  v-model="remainTime" placeholder="--"></el-input>
              <span>S</span>
            </p>
            <p>
              <span>时期:</span>
              <el-date-picker
                v-model="captureTime"
                type="datetimerange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
              </el-date-picker>
            </p>
            <p>
              <el-button>查询</el-button>
            </p>

          </div>
          <div class="capture">
            <p>共0条数据</p>
            <TableCommonView 
              :table-list="tableList"
              @selCommonClick="selCommonClick"
              @selTableCol="selTableCol"
              @getSelectArray="getSelectArray"
              >
                <template slot="tableButton">
                  <el-table-column label="操作"  fixed="right">
                    <template slot-scope="scope">
                      <el-button type="text" size="small" @click="btnEdit(scope.row)"
                        style="margin-right: 5px">编辑
                      </el-button>
                      <el-button type="text" size="small" @click="btnLook(scope.row)"
                        style="margin-right: 5px">查看
                      </el-button>
                      <el-button type="text" size="small" @click="btnFind(scope.row)"
                        style="margin-right: 5px">查找
                      </el-button>
                      <el-button type="text" size="small" @click="btnCopy(scope.row)"
                        style="margin-right: 5px">复制
                      </el-button>
                      <el-button type="text" size="small" @click="btnMove(scope.row)"
                        style="margin-right: 5px">移动
                      </el-button>
                      <el-button type="text" size="small" @click="btnDele(scope.row)"
                        style="margin-right: 5px">删除
                      </el-button>

                    </template>
                  </el-table-column>
                </template>
            </TableCommonView>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getTagList,
} from "@/api/baseLibrary/baseLibrary"
export default {
  name: "AddSalesDetailsDialog",
  mixins: [],
  props: {
    editCommonConfig: {
      type: Object,
      default: () => {
        return {
          title:"",
          visible: false,
          infomation: {
          },
          currentId: "",
          isLookImg:true,
        }
      }
    }
  },
  computed: {},
  data() {
    return {
      pedestalList: [],
      pedestalListsWhite:[],
      pedestalListsBlack:[],
      dialogWidth: "39%",
      editConfig: this.editCommonConfig,
      closeUrl: require("@/assets/img/close.png"),
      currentIndex: 0,
      snapTime: "",
      checkboxs:[],
      tableList: {}, // 列表
      tableColumn: [
        { label: "抓拍实景", prop: "personName",  },
        { label: "摄像机名称", prop: "sex",  },
        { label: "开始时间", prop: "idCard", },
        { label: "结束时间", prop: "phoneNum", },
      ],
      showCol: [ "抓拍实景", "摄像机名称", "开始时间", "结束时间"],
      captureTime:[],
      remainTime:10,
    }
  },
  created() {
    this.setTable()
    this.getTagList() // 底库列表
  },
  watch: {

  },
  methods: {
    setTable() {
      this.tableList = {
        tableInfomation: [],
        selectIndex: true,
        showcol: this.showCol,
        allcol: [],
        selectBox: true,
        tableColumn: this.setColumnVisible(this.showCol)
      }
      this.tableList.allcol = this.tableList.tableColumn.filter((ele) => !ele.default).map((ele) => ele.label)
    },
    selTableCol(val) {
      this.showcol = val
      this.tableList.tableColumn = this.setColumnVisible(val)
    },
    setColumnVisible(showCol) {
      return this.tableColumn.map((ele) => {
        return {
          ...ele,
          isShowColumn: showCol.includes(ele.label)
        }
      })
    },
    // 详情
    selCommonClick(row) {
      console.log(row, "详情")
    },
    // checkbox 选择
    getSelectArray(val){
      console.log(val,"val")
    },
    handleClose() {
      this.pedestalList=[]
      this.editConfig.visible = false
    },
    // 获取底库列表
    async getTagList() {
      const rsp = await getTagList({});
      if (rsp && rsp.success) {
        var arr1 = new Array
        if(rsp.data){
          this.pedestalListsWhite = rsp.data.filter(function (i) {
            if (i.status !== 1 && i.bwType==='2') {
              return i
            }
          })
          this.pedestalListsBlack = rsp.data.filter(function (i) {
            if (i.status !== 1 && i.bwType==='1') {
              return i
            }
          })

          this.pedestalListsWhite.push(...arr1)
          console.log("是啥ddd",this.pedestalListsWhite,this.pedestalListsBlack)
        }
      } else {
        // this.$notify({
        //   title: "失败",
        //   message: "检索数据查询失败！",
        //   type: "warning"
        // });
      }
    },
    // 保存
    savePedestal(){
      
    },
    cancelPedestal(){
      this.pedestalList=[]
      this.editConfig.visible=false
    },
    
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.preview-image {
  width: 760px;
  height: 734px;
  .dialog-header {
    display: flex;
    align-items: center;
    font-size: 14px;
    color: #333;
    height: 65px;
    background: #0a1a34;
  }
  .content {
    width: 760px;
    height: 734px;
    background-image: url("/public/panoramicData/pic_alert_bg.png");
    background-position-x: center;
    background-repeat: no-repeat;
    background-size: contain;
    box-sizing: border-box;
    padding: 0 20px;
    position: relative;
    .header-box {
      height: 65px;
      border-bottom: 1px solid #fff;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-sizing: border-box;
      padding-top: 10px;
      .label-box {
        display: flex;
        color: #fff;
        font-size: 28px;
        .common-title {
          margin: 0 20px;
          cursor: pointer;
        }
      }
      .close-box {
        width: 15px;
        height: 22px;
        margin-right: 20px;
        .el-image {
          cursor: pointer;
        }
      }
    }
    .info_wrap{
      width:100%;
      color: #fff;
      .member-info{
        width: 100%;
        color:#fff;
        margin-top: 30px;
        font-size: 14px;
        display: flex;
        align-items: center;
        span{
          margin-left: 30px;
        }
      }
      .search_info{
        color: #fff;
        display: flex;
        justify-content: space-between;
        p{
          display: flex;
          margin-right: 20px;
          align-items: center;
          span{
            margin-right:10px;
          }
          .el-input{
            width: 50px;
            margin-right:10px;
            .el-input__inner{
              border-radius: 50px !important;
            }
          }
        }
      }
      .capture{
        p{
          text-align: right;
        }
      }
    }
    .bigImage-box {
      color: #fff;
      .top-view {
        display: flex;
        .snap-left-box {
          .label-common {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            margin: 15px 15px;
          }
          .img-box {
            width: 409px;
            height: 255px;
            .el-image {
              width: 100%;
              height: 100%;
            }
          }
          .value-common {
            font-weight: 700;
            margin-top: 28px;
            margin-left: 7px;
            font-size: 16px;
          }
          .device-info {
            margin-left: 7px;
            margin-top: 10px;
            font-size: 16px;
            width: 409px;
          }
        }
        .snap-right-box {
          margin-left: 20px;
          .label-common {
            color: rgba(255, 255, 255, 0.8);
            font-size: 18px;
            margin: 15px 0px;
          }
          .snap-image-box {
            display: flex;
            position: relative;
            margin-bottom: 30px;
            .img-right,
            .img-left {
              width: 133px;
              height: 139px;
            }
            .img-right {
              margin-left: 20px;
            }
            .radio-view {
              position: absolute;
              left: calc(50% - 50px);
              bottom: -10px;
              width: 100px;
              height: 38px;
              line-height: 40px;
              border-radius: 6px;
              background: #008000;
              font-size: 22px;
              text-align: center;
            }
          }
          .person-info {
            margin-top: 10px;
            font-size: 16px;
          }
        }
      }
      .bottom-view {
        margin-left: 7px;
        .other-box {
          margin-top: 10px;
          color: rgba(255, 255, 255, 0.8);
          font-size: 16px;
        }
        .tag-box {
          margin-top: 20px;
          display: flex;
          .tag-info {
            width: 88px;
            height: 32px;
            line-height: 32px;
            text-align: center;
            border-radius: 3px;
            opacity: 1;
            background: #3d6da1;
            box-sizing: border-box;
            border: 1px solid #ffffff;
            margin-left: 10px;
            &:first-child {
              margin-left: 0px;
            }
          }
        }
      }
    }
    .video-box {
      display: flex;
      .left-video {
        margin-top: 20px;
        width: 70%;
        height: 400px;
        .no-video {
          width: 100%;
          height: 260px;
          line-height: 260px;
          text-align: center;
          background: #0a1a34;
          border: 2px solid #3d6da1;
          border-radius: 5px;
          color: #e5e5e5;
          font-size: 22px;
        }
      }
      .right-video {
        width: 30%;
        margin-left: 20px;
        .label-common {
          color: rgba(255, 255, 255, 0.8);
          font-size: 18px;
          margin: 15px 0px;
        }
      }
    }
    .footer-box {
      position: absolute;
      right: 45px;
      bottom: 35px;
      height: 32px;
      text-align: right;
      .el-button {
        color: #fff;
        background-color: transparent;
      }
    }
  }
}
.commonColor {
  color: #fff;
}
.selColor {
  color: #767676;
}
</style>
<style lang="scss">
.el-dialog__header {
  padding: 0 20px;
  background: #0a1a34;
  border-bottom: 0px solid #e5e5e5;
}
.el-dialog__headerbtn {
  display: none;
}
.el-dialog__body {
  background: #0a1a34;
  width: 760px;
}
.footer_button {
  position: absolute;
  bottom: 50px;
  right: 50px;
}
.search_info{
  p{
    .el-input{
      margin-right:10px;
      .el-input__inner{
        border-radius: 16px !important;
        height: 30px;
      }
    }
    .el-date-editor{
      height: 32px;
      .el-range__icon{
        height: 32px;
      }
      .el-range-separator{
        height: 30px;
      }
    }
    .el-button{
      height: 32px;
      line-height: 32px;
      padding: 0px 20px;
      span{
        line-height: 32px;
      }
    }
  }
}
.styleBtn{
  color:#fff;
  i{
    color:#fff !important;
  }
}
</style>
